<!--
 * @Author: li bo
 * @Date: 2025/10/14 10:24:27
 * @LastEditors: li bo
 * @Description: "播放歌曲列表"
 -->
<template>
    <div class="play-songs-list-container">
        <!-- 遮罩层 -->
        <div class="mask" v-show="playerSetting.playSongStatus" @click="playerSetting.playSongStatus = false"></div>
        <!-- 内容 -->
        <div class="content" :class="playerSetting.playSongStatus ? 'content-active' : ''" @click.stop>
            <!-- 顶部 -->
            <div class="top flx-justify-between">
                <div class="flx">
                    <span class="text">播放列表</span>
                    <span class="num">150</span>
                </div>
                <i class="iconfont icon-kuaijin" @click="playerSetting.playSongStatus = false"></i>
            </div>
            <!-- 列表 -->
            <div class="list">
                <div class="item item-active flx-justify-between">
                    <!-- 信息 -->
                    <div class="flx-align-center">
                        <!-- 封面 -->
                        <div class="cover-box">
                            <i v-if="status" class="iconfont icon-1_music81" @click="status = !status"></i>
                            <i v-else class="iconfont icon-pause" @click.stop="status = !status"></i>
                            <img src="../../../../../assets/images/login/login-bg.jpg" alt="" class="cover" />
                        </div>
                        <div>
                            <div>歌曲名称</div>
                            <div>歌手名称</div>
                        </div>
                    </div>
                    <!-- 时间 -->
                    <div class="time">03:25</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { musicStore } from "@/store/music/musicStore.js"
const { playerSetting } = storeToRefs(musicStore());


let status = ref(false);

</script>

<style scoped lang="scss">
    @import "./play-songs-list.scss";
</style>